<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>jQuery Dynamic Drag'n Drop</title>
		<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.10.4.custom.min.js"></script>
		<style>
			body {
				font-family: Arial, Helvetica, sans-serif;
				font-size: 16px;
				margin-top: 10px;
			}
			ul {
				margin: 0;
			}
			#contentWrap {
				width: 700px;
				margin: 0 auto;
				height: auto;
				overflow: hidden;
			}
			#contentTop {
				width: 600px;
				padding: 10px;
				margin-left: 30px;
			}
			#contentLeft {
				float: left;
				width: 400px;
			}
			#contentLeft li {
				list-style: none;
				margin: 0 0 4px 0;
				padding: 10px;
				background-color: #00CCCC;
				border: #CCCCCC solid 1px;
				color: #fff;
			}

			#contentRight {
				float: right;
				width: 260px;
				padding: 10px;
				background-color: #336600;
				color: #FFFFFF;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {

				$(function() {
					$("#contentLeft ul").sortable({
						cursor : 'move',
						
					});
				});
			});
		</script>
	</head>
	<body style="cursor: auto;">
		<div id="contentWrap">

			<div id="contentLeft">
				<ul class="ui-sortable">
					<li id="recordsArray_3" style="opacity: 1; z-index: 0;" class="">
						3. Returned array can be found at the right
					</li>
					<li id="recordsArray_2">
						2. Dragging changes the opacity of the item
					</li>
					<li id="recordsArray_1" style="opacity: 1; z-index: 0;" class="">
						1. Once dropped, an Ajax query is activated
					</li>
					<li id="recordsArray_4" style="opacity: 1; z-index: 0;" class="">
						4. It is very very easy
					</li>
					<li id="recordsArray_5" style="opacity: 1; z-index: 0;" class="">
						5. It is very very easy
					</li>
					<li id="recordsArray_6" style="opacity: 1; z-index: 0;" class="">
						6. It is very very easy
					</li>
					<li id="recordsArray_7" style="opacity: 1; z-index: 0;" class="">
						7. It is very very easy
					</li>
				</ul>
			</div>
		</div>
	</body>
</html>
